<script setup lang="ts" name="live2D">
import {onMounted, ref} from 'vue'
import * as PIXI from 'pixi.js'
import * as pixiFnPatch from "@pixi/unsafe-eval"
import { Live2DModel} from 'pixi-live2d-display'
// import jsonFile from '/model/HK416_805/normal.model3.json?url'
import jsonFile from '/model/newModel/Murasame.model3.json?url'
import jsonFiles from '@renderer/assets/Murasame.model3.json'
import { status } from '../../move'
// 全局注册
let windowRef:any = window;
windowRef.PIXI = PIXI;
// 修复@pixi/unsafe-eval无法正常安装问题
pixiFnPatch.install(PIXI);

async function initLive2D(){
  let model:any = await Live2DModel.from(jsonFile);
  const app = new PIXI.Application({
    view: document.getElementById('live2d-canvas') as HTMLCanvasElement,
    width: 270,
    height: 550,
    autoStart:true,
    backgroundAlpha:0,
    transparent: true,
    autoDensity:true,
    antialias: true,

  });
  // 鼠标跟踪方法
  // model.interactive = true
  app.stage.addChild(model);
  // app.renderer.backgroundColor = 0x0161639;
  // transforms 模型方位
  model.x = 50; // 方位（单位像素）
  model.y = 80
  // model.rotation = Math.PIS
  // model.skew.x = Math.PI
  model.scale.set(0.16)  // 缩放
  model.anchor.set(0, 0) // 锚点，以画布中心下方为中心点,x，y（单位：倍）
  model.on('pointerdown', (hitAreas) => {
    const { x, y } = hitAreas.data.global
    const point = model.hitTest(x, y)
    if(point.length>0){
      //可移动
      status.value = false;
    }
    else{
      status.value = true;
    }
    if (point.includes('face')) {
      model.motion("Tapface",0)
    }
    if (point.includes('Thair')) {
      model.motion("Taphair");
    }
    if (point.includes('xiongbu')) {
      model.motion("Tapxiongbu");
    }
    if (point.includes('qunzi')) {
      model.motion("Tapqunzi");
    }
    if (point.includes('leg')) {
      model.motion("Tapleg");
    }

  })
  //快捷键
  windowRef.api.onRunAnimation((value)=>{
      switch (value) {
        case '1':
          model.motion("Tapface");
          break;
        case '2':
          model.motion("Taphair");
          break;
        case '3':
          model.motion("Tapxiongbu");
          break;
        case '4':
          model.motion("Tapqunzi");
          break;
        default:
          model.motion("Tapleg");
          break;
      }
    })
  //
  model.internalModel.motionManager.on('motionStart', (group, index, audio) => {
    if (audio) {
      // e.g. show subtitle for this audio
      showSubtitle(group, index);
      audio.addEventListener('ended', () => dismissSubtitle());
    }
  });

}

const waifu_tips = ref<HTMLElement|null>(null)
const showSubtitle=(group,index)=>{
  //获取到模型所说文字
  const subtitle = jsonFiles.FileReferences.Motions[group][index].Text;
  waifu_tips.value!.style.opacity = '1';
  waifu_tips.value!.innerText=subtitle;


}

const dismissSubtitle = ()=>{
  waifu_tips.value!.style.opacity = '0';
}
onMounted(() => {
  initLive2D();
})
</script>

<template>
  <div class='canvas-wrap' >
    <div id="waifu-tips" ref="waifu_tips"></div>
    <canvas id="live2d-canvas" class="live2d-canvas" width="260" height="550"></canvas>
  </div>
</template>
<style scoped>
.canvas-wrap{
  width: 100%;
  height: 100%;
  cursor: move;
  /*-webkit-app-region: drag*/
}
.live2d-canvas{
  width: 100%;
  height: 100%;
}
#waifu-tips {
  animation: shake 50s ease-in-out 5s infinite;
  background-color: rgba(236, 217, 188, .5);
  border: 1px solid rgba(224, 186, 140, .62);
  border-radius: 12px;
  box-shadow: 0 3px 15px 2px rgba(191, 158, 118, .2);
  font-size: 14px;
  line-height: 24px;
  margin: 10px 20px;
  min-height: 70px;
  opacity: 0;
  overflow: hidden;
  padding: 5px 10px;
  position: absolute;
  text-overflow: ellipsis;
  transition: opacity 1s;
  width: 250px;
  word-break: break-all;
  color: #090909;
  font-weight: 500;
}
@keyframes shake {
  2% {
    transform: translate(.5px, -1.5px) rotate(-.5deg);
  }
  4% {
    transform: translate(.5px, 1.5px) rotate(1.5deg);
  }
  6% {
    transform: translate(1.5px, 1.5px) rotate(1.5deg);
  }
  8% {
    transform: translate(2.5px, 1.5px) rotate(.5deg);
  }
  10% {
    transform: translate(.5px, 2.5px) rotate(.5deg);
  }
  12% {
    transform: translate(1.5px, 1.5px) rotate(.5deg);
  }
  14% {
    transform: translate(.5px, .5px) rotate(.5deg);
  }
  16% {
    transform: translate(-1.5px, -.5px) rotate(1.5deg);
  }
  18% {
    transform: translate(.5px, .5px) rotate(1.5deg);
  }
  20% {
    transform: translate(2.5px, 2.5px) rotate(1.5deg);
  }
  22% {
    transform: translate(.5px, -1.5px) rotate(1.5deg);
  }
  24% {
    transform: translate(-1.5px, 1.5px) rotate(-.5deg);
  }
  26% {
    transform: translate(1.5px, .5px) rotate(1.5deg);
  }
  28% {
    transform: translate(-.5px, -.5px) rotate(-.5deg);
  }
  30% {
    transform: translate(1.5px, -.5px) rotate(-.5deg);
  }
  32% {
    transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }
  34% {
    transform: translate(2.5px, 2.5px) rotate(-.5deg);
  }
  36% {
    transform: translate(.5px, -1.5px) rotate(.5deg);
  }
  38% {
    transform: translate(2.5px, -.5px) rotate(-.5deg);
  }
  40% {
    transform: translate(-.5px, 2.5px) rotate(.5deg);
  }
  42% {
    transform: translate(-1.5px, 2.5px) rotate(.5deg);
  }
  44% {
    transform: translate(-1.5px, 1.5px) rotate(.5deg);
  }
  46% {
    transform: translate(1.5px, -.5px) rotate(-.5deg);
  }
  48% {
    transform: translate(2.5px, -.5px) rotate(.5deg);
  }
  50% {
    transform: translate(-1.5px, 1.5px) rotate(.5deg);
  }
  52% {
    transform: translate(-.5px, 1.5px) rotate(.5deg);
  }
  54% {
    transform: translate(-1.5px, 1.5px) rotate(.5deg);
  }
  56% {
    transform: translate(.5px, 2.5px) rotate(1.5deg);
  }
  58% {
    transform: translate(2.5px, 2.5px) rotate(.5deg);
  }
  60% {
    transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }
  62% {
    transform: translate(-1.5px, .5px) rotate(1.5deg);
  }
  64% {
    transform: translate(-1.5px, 1.5px) rotate(1.5deg);
  }
  66% {
    transform: translate(.5px, 2.5px) rotate(1.5deg);
  }
  68% {
    transform: translate(2.5px, -1.5px) rotate(1.5deg);
  }
  70% {
    transform: translate(2.5px, 2.5px) rotate(.5deg);
  }
  72% {
    transform: translate(-.5px, -1.5px) rotate(1.5deg);
  }
  74% {
    transform: translate(-1.5px, 2.5px) rotate(1.5deg);
  }
  76% {
    transform: translate(-1.5px, 2.5px) rotate(1.5deg);
  }
  78% {
    transform: translate(-1.5px, 2.5px) rotate(.5deg);
  }
  80% {
    transform: translate(-1.5px, .5px) rotate(-.5deg);
  }
  82% {
    transform: translate(-1.5px, .5px) rotate(-.5deg);
  }
  84% {
    transform: translate(-.5px, .5px) rotate(1.5deg);
  }
  86% {
    transform: translate(2.5px, 1.5px) rotate(.5deg);
  }
  88% {
    transform: translate(-1.5px, .5px) rotate(1.5deg);
  }
  90% {
    transform: translate(-1.5px, -.5px) rotate(-.5deg);
  }
  92% {
    transform: translate(-1.5px, -1.5px) rotate(1.5deg);
  }
  94% {
    transform: translate(.5px, .5px) rotate(-.5deg);
  }
  96% {
    transform: translate(2.5px, -.5px) rotate(-.5deg);
  }
  98% {
    transform: translate(-1.5px, -1.5px) rotate(-.5deg);
  }
  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
}
</style>

